<template>
	<view>
		<view class="">
			<view class="flex-between px-40 py-30 car bg-ligter">
				<u-avatar src="" size="40"></u-avatar>
				<view class="flex-1 ml-30">
					<view class="size-36 text-bold mt-4">比亚迪宋</view>
					<view class="size-30 gray-6 mt-10">灶师傅</view>
				</view>
			</view>
			<view class="p-30 bg-white">
				<view class="size-36 text-med my-20">出发时间：2024-10-10 10:30</view>
				<view class="flex size-30 mt-10">
					<view class="badge badge-1">起</view>
					<view class="ml-20">河南省郑州市金水区六合小区</view>
				</view>
				<view class="flex size-30 mt-10 mb-30">
					<view class="badge badge-2">终</view>
					<view class="ml-20">河南省周口市西华县</view>
				</view>
			</view>
			<view class="px-30 py-20 bg-white mt-30 size-30">
				<view class="flex-between py-20">
					<view>出行人数</view>
					<u-number-box :min="1" :max="4" button-size="20" v-model="personNum" @change="valChange"></u-number-box>
				</view>
				<view class="flex py-20">
					<view>备注信息</view>
					<view class="ml-30 flex-1">
						<u-input fontSize="15" v-model="remark" border="none" placeholder="填写备注信息"></u-input>
					</view>
				</view>
			</view>
			<view class="flex-end m-30">
				<view>
					订单金额：
					<text class="primary size-46 text-bold">￥{{ personNum * 100 }}</text>
				</view>
			</view>
			<view class="n-btn-primary m-30" @click="$tools.to('/pages/placeOrder/placeOrder?id=1')">确认预约</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			remark: '',
			personNum: 1
		};
	},
	methods: {
		valChange(e) {
			console.log('当前值为: ' + e.value);
		}
	}
};
</script>

<style lang="scss"></style>
